<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span> 新增薪资表
      </p>
      <div id="nav_go2">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <div id="table_salary">
      <!-- 详情 --start-->
      <template>
        <el-table :data="detailedvalue" style="width: 100%" height="100%">
          <el-table-column label="序号" width="200" type="index"></el-table-column>
          <el-table-column label="姓名" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.empname"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="岗位工资" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.salary"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="工龄津贴" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.workagepay"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="岗位/项目补" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.positpay"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="奖金" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.bonus"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="加班费" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.addworkpay"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="驻外补助" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.outpay"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="补发工作" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.reissuepy"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="餐费补贴" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.mealpay"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="应发工作" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.shouldpay"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="考勤扣款" width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.abscutpay"
                @input="abscutpayfn(scope.row.abscutpay,scope.$index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="扣款" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cupayt" @input="cupaytfn(scope.row.cupayt,scope.$index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="合计" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.kktotal" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="养老金" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.oldor" @input="oldorfn(scope.row.oldor,scope.$index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="失业金" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.nowork" @input="noworkfn(scope.row.nowork,scope.$index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="医疗金" width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.treatement"
                @input="treatementfn(scope.row.treatement,scope.$index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="公积金" width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.cpfbord"
                @input="cpfbordfn(scope.row.cpfbord,scope.$index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="合计" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.djtotal" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="税前工资" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taxbefore"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="代缴个税" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.reptax"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="个人借贷" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.perdebit"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="实发工资" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.takemoney" @focus="adddetailedfn()"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="addgz()">确认</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      month: "",
      year: "",
      depart: "",
      monthvalue: [
        { label: "1" },
        { label: "2" },
        { label: "3" },
        { label: "4" },
        { label: "5" },
        { label: "6" },
        { label: "7" },
        { label: "8" },
        { label: "9" },
        { label: "10" },
        { label: "11" },
        { label: "12" }
      ],
      detailedvalue: [{}] //详细数据
    };
  },
  created() {
    this.getbm();
  },
  methods: {
    //新增
    addgz() {

    },
    //返回
    revert() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.title {
  height: 40px;
  text-align: center;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go2 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
#table_salary {
  width: 95.1%;
  height: 600px;
  margin: 0 auto;
  position: relative;
  p {
    width: 30px;
    height: 60px;
    background: $Personnel;
    text-align: center;
    border-radius: 0 5px 5px 0;
    color: $white;
    padding-top: 10px;
    position: absolute;
    cursor: pointer;
    right: -2.2%;
    top: 200px;
  }
}
.bottom {
  text-align: center;
  margin-top: 10px;
}
</style>
<style>
#table_salary .el-table thead.is-group th {
  background: #fff;
}
.el-table th > .cell {
  text-align: center;
}
#table_salary .el-table {
  border-left: 0;
  border-right: 0;
}
#table_salary .el-input__inner {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}
#table_salary .el-table td div {
  text-align: center;
}
#table_salary .el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}
</style>